 <template>
  <div class="writeArticleDiv">
    <el-input placeholder="请输入标题" v-model="articleForm.articleTitle" />
    <br>
    <br>
    <mavon-editor
        ref="md"
        :toolbars="toolbars"
        style="z-index: 1;min-height: 380px"
        v-model="articleForm.articleContent"
        :ishljs="true"
        @imgAdd="imgAdd" />
    <br>
      <el-form ref="videoFrom">
        <el-form-item label="点击上传首图：">
          <el-image v-if="uploadFirstImgState" :src="articleForm.articleFirstImage" style="width: 15%;"/>
          <el-upload
              v-else
              drag
              class="upload-demo"
              multiple
              :show-file-list="false"
              :action="global.uploadUrl"
              :on-success="getFirstImage">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">上传封面</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="创作类型：">
          <el-radio v-model="articleForm.articlePost" label="2" style="margin-left: 31px">帖子</el-radio>
          <el-radio v-model="articleForm.articlePost" label="1">文章</el-radio>&nbsp;&nbsp;&nbsp;注:优质文章会优先展示哦~
        </el-form-item>
        <el-form-item label="选择社区：">
          <el-button type="primary" @click="dialogFormVisible = true" v-model="communityName" style="margin-left: 23px">
            {{ communityName }}
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getArticle" style="margin-left: 104px">发布</el-button>
        </el-form-item>
      </el-form>

    <el-dialog title="选择社区" :visible.sync="dialogFormVisible">
      <div v-for="item in communityData" style="display: inline-block">
        <div class="communityDiv">
          <el-button @click="getCommunityId(item.communityId,item.communityName)">
            {{ item.communityName }}
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import request from "../../../utils/request";

export default {
  data() {
    return {
      communityName:"请选择社区",
      communityId:'',
      communityData:[],
      articleForm:{},
      activeIndex: '1',
      activeIndex2: '1',
      uploadFirstImgState:false,
      dialogFormVisible: false,
      allImage:[],
      submitState:false,
      toolbars: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        strikethrough: true, // 中划线
        mark: true, // 标记
        superscript: true, // 上角标
        subscript: true, // 下角标
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        code: true, // code
        table: true, // 表格
        undo: true, // 上一步
        redo: true, // 下一步
        trash: true, // 清空
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
      }
    };
  },
  methods: {
    initCommunity(){
      request.get("/article/initCommunity").then(res =>{
        this.communityData=res.data;
      })
    },
    imgAdd (pos, $file) {
      let $vm = this.$refs.md
      const formData = new FormData()
      formData.append('file', $file)
      request({
        url: '/file/upload',
        method: 'post',
        data: formData,
        headers: {'Content-Type': 'multipart/form-data'},
      }).then((res) => {
        // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
        //    this.$vm.$img2Url(pos, url.data);
        if (this.global.recommendImg === "http://localhost:8080"){
          this.allImage.push(res.msg.substring(33))
        }else if (this.global.recommendImg === "https://www.tiehuplayer.xyz"){
          this.allImage.push(res.msg.substring(39))
        }
        $vm.$img2Url(pos, res.msg);
      })
    },
    getCommunityId(communityId,communityName){
      this.communityName=communityName
      this.communityId=communityId
      this.dialogFormVisible = false
    },
    getArticle(){
      if (this.articleForm.articlePost !== undefined && this.articleForm.articleContent !== '' && this.articleForm.articleTitle !== undefined && this.communityName !== '请选择社区'){
        this.articleForm.articleCommunityId=this.communityId;
        this.articleForm.articleAuthor=JSON.parse(localStorage.getItem("userData")).usersId;
        request.post('/article/write',this.articleForm).then(res => {
          if (res.code !== '200'){
            this.$message.error(res.msg)
          }
          this.submitState=true
          this.$message.success(res.msg)
          this.$router.push("/")
        })
      }else {
        this.$message({
          type:"warning",
          message:"要完成填写标题,内容,创作类型及社区才能发布哦~",
          offset:75
        })
      }
    },
    getFirstImage(res){
      this.articleForm.articleFirstImage=res.msg;
      if (this.global.recommendImg === "http://localhost:8080"){
        this.allImage.push(res.msg.substring(33))
      }else if (this.global.recommendImg === "https://www.tiehuplayer.xyz"){
        this.allImage.push(res.msg.substring(39))
      }
      this.uploadFirstImgState=true;
    },
  },
  mounted() {
    document.title="创作内容 - 贴乎";
    this.initCommunity()
  },
  destroyed() {
    if (this.allImage.length !== 0 && this.submitState === false){
      request.delete('/file/delete/?allImage='+this.allImage)
    }
  },
}
</script>

<style scoped>

::-webkit-scrollbar {
  width: 12px;
}
.communityDiv{
  margin-top: 20px;
  margin-left:10px;
  box-shadow: 0 2px 59px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}
.writeArticleDiv{
  margin: 0 auto;
  margin-top: 50px;
  max-width: 95%;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}
</style>
